<%--
  Created by IntelliJ IDEA.
  User: Gao
  Date: 2022/12/27
  Time: 8:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%@include file="header.jsp" %>
</head>
<body>
    <form id="formId" class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <select>
                    <option value="">请选择一级分类</option>
                    <option value="100001">家用电器</option>
                    <option value="100002">数码3C</option>
                    <option value="100003">服装箱包</option>
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="categoryId">
                    <option value="100006">冰箱11</option>
                    <option value="100007">电视</option>
                    <option value="100008">洗衣机</option>
                    <option value="100009">空调</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品名</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" placeholder="请输入" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品子标题</label>
            <div class="layui-input-block">
                <input type="text" name="subtitle" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" name="price" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">库存</label>
            <div class="layui-input-block">
                <input type="text" name="stock" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="status" value="1" title="在售" checked/>
                <input type="radio" name="status" value="2" title="下架" />
                <input type="radio" name="status" value="3" title="删除" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片上传</label>
            <div class="layui-input-block">
                <div class="layui-upload">
                    <div class="layui-upload-list">
                        <input type="hidden" id="mainImageId" name="mainImage"/>
                        <img class="layui-upload-img" width="150px" height="150px" id="demo1">
                        <p id="demoText"></p>
                    </div>
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品详情</label>
            <div class="layui-input-block">
               <textarea id="detailId" name="detail" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" type="button" onclick="submitForm()">添加</button>
        </div>
    </form>

    <script src="/static/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
    <script>
        layui.use(['upload', 'element', 'layer'], function() {
            var upload = layui.upload;
            var layer = layui.layer;
            var element = layui.element;

            //常规使用 - 普通图片上传
            var uploadInst = upload.render({
                elem: '#test1'
                ,url: '/upload/uploadImage' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
                ,before: function(obj){
                    //预读本地文件示例，不支持ie8
                    obj.preview(function(index, file, result){
                        $('#demo1').attr('src', result); //图片链接（base64）
                    });

                    //layer.msg('上传中', {icon: 16, time: 0});
                }
                ,done: function(jsonResult){
                    //如果上传失败
                    if(!jsonResult.ok){
                        return layer.msg('上传失败');
                    }
                    //上传成功的一些操作
                    $('#mainImageId').val(jsonResult.data);
                }
                ,error: function(){
                    //演示失败状态，并实现重传
                    var demoText = $('#demoText');
                    demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                    demoText.find('.demo-reload').on('click', function(){
                        uploadInst.upload();
                    });
                }
            });
        });


        KindEditor.ready(function(K) {
            var kingEditorParams = {
                afterBlur: function () { this.sync(); }
            }
            KindEditor.create('#detailId', kingEditorParams);
        });

        function submitForm() {
            $.post(
                '/product/add',
                $('#formId').serialize(), //{'name':'张三','password':123,'age':23}
                function(jsonResult) {
                    if (jsonResult.ok) {
                        //mylayer.okMsg('添加成功');
                        //假设这是iframe页
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        layer.msg(
                            '添加成功',
                            {icon:1, time:1000},
                            function() {
                                parent.layer.close(index); //再执行关闭
                                window.parent.location.reload();
                            }
                        );
                    } else {
                        mylayer.errorMsg('添加失败');
                    }
                },
                'json'
            );
        }
    </script>


</body>
</html>
